<template>
  <div ref="vantaRef" style="width: 100%; height: 100%">
    <div class="main-box">
      <div :class="['container', 'container-register', { 'is-txl': isLogin }]">
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules">
          <h2 class="title">注册界面</h2>
          <el-form-item prop="username">
          <input class="form__input" type="text" placeholder="Username" v-model="registerForm.username" />
        </el-form-item>
        <el-form-item prop="password">
          <input class="form__input" type="password" placeholder="Password" v-model="registerForm.password"/>
        </el-form-item>
        <el-form-item prop="email">
          <input class="form__input" type="text" placeholder="Email" v-model="registerForm.email"/>
        </el-form-item>
          <el-button round type="primary" style="background-color:#ff8240"  @click="Register">注册</el-button>
        </el-form>
      </div>
      <div
        :class="['container', 'container-login', { 'is-txl is-z200': isLogin }]"
      >
      <div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
          <h2 class="title">登录界面</h2>
          <el-form-item prop="username">
          <input class="form__input" type="text" ref="username" placeholder="Username" v-model="loginForm.username"/>
          </el-form-item>
          <el-form-item prop="password">
          <input class="form__input" type="password" ref="password" placeholder="Password" v-model="loginForm.password"/>
        </el-form-item>
          <!-- <div class="primary-btn" @click="login">立即登录</div> -->
          <el-button :loading="loading" type="primary" @click="Login" round style="background-color:#ff8240">登录</el-button>
        </el-form>
      </div>
      </div>
      <div :class="['switch', { login: isLogin }]">
        <div class="switch__circle"></div>
        <div class="switch__circle switch__circle_top"></div>
        <div class="switch__container">
          <h2>{{ isLogin ? 'Hello Friend !' : 'Welcome Back !' }}</h2>
          <p>
            {{
              isLogin
                ? 'Enter your personal details and start journey with us'
                : 'To keep connected with us please login with your personal info'
            }}
          </p>
          <div class="primary-btn" @click="isLogin = !isLogin">
            {{ isLogin ? '去注册' : '去登录' }}
          </div>
        </div>
      </div>
    </div>
  </div>
  </template>
  
<script>
import * as THREE from "three";
import NET from "vanta/src/vanta.net";
import {register} from "@/api/user"
export default {
name: 'Login',
data() {
  const validatePassword = (rule, value, callback) => {
    if (value.length < 6) {
      callback(new Error('密码长度不能少于6位'))
    } else {
      callback()
    }
  }
  const validateEmail = (rule, value, callback) => {
    const emailReg = /^([a-zA-Z0-9]+[-_]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    if (emailReg.test(value)){
      callback()
    }else{
      callback(new Error('邮箱格式不正确'))
    }
  }
  return {
    loading: false,
    isLogin: true,
    loginForm: {
      username: '',
      password: '',
    },
    loginRules: {
      password: [{ required: true, trigger: 'blur', validator: validatePassword }],
      username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
    },
    registerForm: {
      username: '',
      password: '',
      role:'user',
      email:'',
    },
    registerRules: {
      password: [{ required: true, trigger: 'blur', validator: validatePassword }],
      username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
      email: [{ required: true, message: '请填写电子邮箱', trigger: 'change',validator: validateEmail }],
    },
  }
},
methods: {
  Login() {
    this.$refs.loginForm.validate(valid => {
      if (valid) {
        this.loading = true
        this.$store.dispatch('user/login', this.loginForm).then(() => {
          this.$router.push({ path: this.redirect || '/' })
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      } else {
        console.log('error submit!!')
        return false
      }
    })
  },
  Register() {
    this.$refs.registerForm.validate(valid => {
      if(valid){
      register(this.registerForm).then(response=>{
        this.$notify({
        title: '成功',
        message: '注册成功,自动登录',
        type: 'success'
      });
      this.$store.dispatch('user/login',this.registerForm).then(() => {
          this.$router.push({ path: this.redirect || '/' })
        })
        const { data } = response
        console.log(response)
      })
      }
      else {
        console.log('error submit!!')
        return false
      }
    })
  },
},
watch: {
  $route: {
    handler: function(route) {
      this.redirect = route.query && route.query.redirect
    },
    immediate: true
  }
},
mounted() {
  this.vantaEffect = NET({
    el: this.$refs.vantaRef,
    THREE: THREE,
  });
  VANTA.NET({
    el: this.$refs.vantaRef,
    /*以下为样式配置*/
    mouseControls: false,
    touchControls: false,
    gyroControls: false,
    minHeight: 200.0,
    minWidth: 200.0,
    scale: 1.0,
    scaleMobile: 5.0,
    color: 0xFFE543,
    backgroundColor: 0xAA5B71,
    points: 13.0,
    maxDistance: 21.0,
    spacing: 17.0,
  });
},
beforeDestroy() {
  if (this.vantaEffect) {
    this.vantaEffect.destroy();
  }
},
}
</script>

<style lang="scss" scoped>

.main-box {
position: absolute;
width: 1000px;
min-width: 1000px;
min-height: 600px;
height: 600px;
padding: 25px;
margin-left:250px;
margin-top: 3%;
background-color: #ecf0f3;
//box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
border-radius: 12px;
overflow: hidden;
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0px;
  width: 600px;
  height: 100%;
  padding: 25px;
  background-color: #ecf0f3;
  transition: all 0.5s;
  form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: #a0a5a8;
    .title {
      font-size: 34px;
      font-weight: 700;
      line-height: 3;
      color: #181818;
    }
    .text {
      margin-top: 30px;
      margin-bottom: 12px;
    }
    .form__input {
      width: 350px;
      height: 40px;
      margin: 4px 0;
      padding-left: 25px;
      font-size: 13px;
      letter-spacing: 0.15px;
      border: none;
      outline: none;
      // font-family: 'Montserrat', sans-serif;
      background-color: #ecf0f3;
      transition: 0.25s ease;
      border-radius: 8px;
      box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
      &::placeholder {
        color: #a0a5a8;
      }
    }
  }
}
.container-register {
  z-index: 100;
  left: calc(100% - 600px);
}
.container-login {
  left: calc(100% - 600px);
  z-index: 0;
}
.is-txl {
  left: 0;
  transition: 1.25s;
  transform-origin: right;
}
.is-z200 {
  z-index: 200;
  transition: 1.25s;
}
.switch {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 400px;
  padding: 50px;
  z-index: 200;
  transition: 1.25s;
  background-color: #ecf0f3;
  overflow: hidden;
  box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;
  color: #a0a5a8;
  .switch__circle {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background-color: #ecf0f3;
    box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;
    bottom: -60%;
    left: -60%;
    transition: 1.25s;
  }
  .switch__circle_top {
    top: -30%;
    left: 60%;
    width: 300px;
    height: 300px;
  }
  .switch__container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    width: 400px;
    padding: 50px 55px;
    transition: 1.25s;
    h2 {
      font-size: 34px;
      font-weight: 700;
      line-height: 3;
      color: #181818;
    }
    p {
      font-size: 14px;
      letter-spacing: 0.25px;
      text-align: center;
      line-height: 1.6;
    }
  }
}
.login {
  left: calc(100% - 400px);
  .switch__circle {
    left: 0;
  }
}
.primary-btn {
  width: 180px;
  height: 50px;
  border-radius: 25px;
  margin-top: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  letter-spacing: 2px;
  background-color: #FF8240;
  color: #f9f9f9;
  cursor: pointer;
  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
  &:hover {
    box-shadow: 4px 4px 6px 0 rgb(255 255 255 / 50%),
      -4px -4px 6px 0 rgb(116 125 136 / 50%),
      inset -4px -4px 6px 0 rgb(255 255 255 / 20%),
      inset 4px 4px 6px 0 rgb(0 0 0 / 40%);
  }
}
}
</style>

